<template>
  <div class="index-page">
    <!--    <a-input-search-->
    <!--      v-model:value="searchText"-->
    <!--      placeholder="请输入搜索关键词"-->
    <!--      enter-button="搜索"-->
    <!--      size="large"-->
    <!--      @search="onSearch"-->
    <!--    />-->
    <a-auto-complete
      v-model:value="searchText"
      :options="options"
      style="width: 85%"
      size="large"
      placeholder="请输入搜索关键词"
      @select="onSearch"
      @search="getSearchPrompt"
    />
    <a-button
      type="primary"
      style="left-margin: 10px; width: 15%"
      size="large"
      @click="onSearch(searchText)"
      >搜索
    </a-button>
    <MyDivider />
    <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
      <a-tab-pane key="post" tab="文章">
        <PostList :post-list="postList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片">
        <PictureList :picture-list="pictureList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <UserList :user-list="userList" />
      </a-tab-pane>
      <a-tab-pane key="video" tab="视频">
        <VideoList :video-list="videoList"></VideoList>
      </a-tab-pane>
    </a-tabs>
    <a-pagination
      v-model:current="current"
      :pageSize="pageSizeParam"
      :showSizeChanger="false"
      :total="total"
    />
  </div>
</template>

<script setup lang="ts">
import { onActivated, ref, watchEffect } from "vue";
import PostList from "@/components/PostList.vue";
import PictureList from "@/components/PictureList.vue";
import UserList from "@/components/UserList.vue";
import MyDivider from "@/components/MyDivider.vue";
import { useRoute, useRouter } from "vue-router";
import myAxios from "@/plugins/myAxios";
import { message } from "ant-design-vue";
import VideoList from "@/components/VideoList.vue";

const postList = ref([]);

const userList = ref([]);

const pictureList = ref([]);

const videoList = ref([]);

const route = useRoute();
const router = useRouter();
const activeKey = route.params.category;

const initSearchParams = {
  type: activeKey,
  text: "",
  pageSize: 50,
  pageNum: 1,
};
const current = ref(1);
const options = ref<any[]>([]);

const onPageChange = (page: number) => {
  current.value = page;
};

//获取搜索建议请求
// const getSearchPrompt = (value: string) => {
//   options.value = [];
//   console.log(value);
//   if (value) {
//     myAxios.get("search/getSearchPrompt?keyword=" + value).then((res: any) => {
//       for (let i = 0; i < res.length; i++) {
//         const tempMap = {
//           value: res[i],
//           color: "red",
//         };
//         options.value.push(tempMap);
//       }
//     });
//   }
// };

const searchText = ref(route.query.text || "");

/**
 * 加载数据
 * @param params
 */
const loadDataOld = (params: any) => {
  const postQuery = {
    ...params,
    searchText: params.text,
  };
  myAxios.post("post/list/page/vo", postQuery).then((res: any) => {
    postList.value = res.records;
  });

  const userQuery = {
    ...params,
    userName: params.text,
  };
  myAxios.post("user/list/page/vo", userQuery).then((res: any) => {
    userList.value = res.records;
  });

  const pictureQuery = {
    ...params,
    searchText: params.text,
  };
  myAxios.post("picture/list/page/vo", pictureQuery).then((res: any) => {
    pictureList.value = res.records;
  });
};

/**
 * 加载聚合数据
 * @param params
 */
const loadAllData = (params: any) => {
  const query = {
    ...params,
    searchText: params.text,
  };
  myAxios.post("search/all", query).then((res: any) => {
    postList.value = res.postList;
    userList.value = res.userList;
    pictureList.value = res.pictureList;
    videoList.value = res.videoList;
  });
};

/**
 * 加载单类数据
 * @param params
 */
const loadData = (params: any) => {
  const { type = "post" } = params;
  if (!type) {
    message.error("类别为空");
    return;
  }
  const query = {
    ...params,
    searchText: params.text,
  };
  if (!type) {
    //type为空可以加载聚合数据
    myAxios.post("/search/all", query).then((res: any) => {
      postList.value = res.postList;
      userList.value = res.userList;
      pictureList.value = res.pictureList; //左边写前端，右边写后端
      total.value = parseInt(res.postTotal); //初始页面默认加载post的total
    });
  } else {
    myAxios.post("search/all", query).then((res: any) => {
      if (type === "post") {
        postList.value = res.dataList;
        total.value = parseInt(res.total);
      } else if (type === "user") {
        userList.value = res.dataList;
        total.value = parseInt(res.total);
      } else if (type === "picture") {
        pictureList.value = res.dataList;
        total.value = 500;
      } else if (type === "video") {
        videoList.value = res.dataList;
        total.value = 500;
        // total.value = parseInt(res.total);
      }
    });
  }
};

const searchParams = ref(initSearchParams);

const total = ref(500);
const pageSizeParam = searchParams.value.pageSize;

watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    text: route.query.text,
    type: route.params.category,
    pageNum: current.value,
  } as any;
  loadData(searchParams.value);
});

const onSearch = (value: string) => {
  current.value = 1;
  router.push({
    query: {
      ...searchParams.value,
      text: value,
    },
  });
};

const onTabChange = (key: string) => {
  current.value = 1;
  router.push({
    path: `/${key}`,
    query: searchParams.value,
  });
};
</script>

<!--<style scoped>-->
<!--.index-page {-->
<!--  background: url("@/image/home.png") 0% 0% / 100% 100%;-->
<!--}-->
<!--</style>-->
